<template>
    <!-- <div>
        <router-link to="/ClassManagementProgress">跳转到目标页面</router-link>
    </div> -->
    <!-- 查询及添加 -->
    <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="班级: " style="width: 195px">
            <el-input placeholder="输入班级名称" autocomplete="off" v-model="formData.className" />
        </el-form-item>
        <el-form-item label="班主任: " style="width: 200px">
            <el-input placeholder="输入班主任名字" autocomplete="off" v-model="formData.teacherName" />
        </el-form-item>
        <el-form-item label="教员:" style="width: 195px">
            <el-input placeholder="输入教员名字" autocomplete="off" v-model="formData.realName" />
        </el-form-item>
        <el-form-item label="学科:" style="width: 195px">
            <el-input placeholder="输入学科名" autocomplete="off" v-model="formData.subjectName" />
        </el-form-item>
        <el-form-item label="是否结业:" style="width:195px">
            <el-select v-model="formData.classStatus" placeholder="请选择状态">
                <el-option :label="classStatus === 1 ? '未结业' : '已结业'" :value="classStatus"
                    v-for="(classStatus,index) in [0, 1]" key="index"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="loadTableData">搜索</el-button>
            <el-button @click="reset">重置</el-button>
        </el-form-item>
    </el-form>

    <!-- 列表 -->
    <el-table ref="multipleTableRef" :loading="loading" style="width: 100%" :data="tableData">
        <el-table-column property="className" width="120" label="班级名" align="center" />
        <el-table-column label="班主任" property="teacherName" width="120" align="center" />
        <el-table-column property="realName" label="教员" width="120" align="center" />
        <el-table-column property="classCount" label="班级人数" align="center" />
        <el-table-column property="subjectName" label="学科名" align="center" />
        <el-table-column property="startDate" label="开班日期" align="center" />
        <el-table-column property="endDate" label="结业日期" align="center" />
        <el-table-column label="是否结业" width="120" align="center">
            <template v-slot="scope">
                <el-tag type="success" v-if="scope.row.classStatus === 1">未结业</el-tag>
                <el-tag type="danger" v-else-if="scope.row.classStatus === 0">已结业</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="班级结业" fixed="right" align="center">
            <template v-slot="scope">
                <!-- 添加条件判断，只有未结业的班级才显示结业按钮 -->
                <el-link v-if="scope.row.classStatus === 1" class="completed-class" type="success" icon="Filter"
                    style="margin-right: 10px" @click="updateClassStatus(scope.row)" :disabled="!(work===scope.row.staffId) && !(work===scope.row.teacherId)">结业</el-link>
            </template>
        </el-table-column>
        <el-table-column label="操作" min-width="240px" fixed="right" align="center">
            <template v-slot="scope">
                <el-link type="danger" :icon="Operation" style="margin-right: 10px" native-type="button"
                    @click="classCourse(scope.row) ">课程信息</el-link>

              <el-tooltip content="无权操作" placement="top" effect="dark" :disabled="(staffId === scope.row.staffId) || (staffId === scope.row.teacherId)">
                <el-link type="warning" :icon="Postcard" style="margin-right: 10px" native-type="button"
                         @click="studentView(scope.row)" :disabled="!(staffId === scope.row.staffId) && !(staffId === scope.row.teacherId)" >学生管理</el-link>
              </el-tooltip>

                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link" style="color: cornflowerblue;">
                        更多操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="a" :icon="Notebook" style="margin-right: 10px"
                                @click="Workandcorrect(scope.row)" :disabled="!(work===scope.row.staffId) && !(work===scope.row.teacherId)">作业管理</el-dropdown-item>
                            <el-dropdown-item command="b" :icon="Finished"
                                @click="classAttendance(scope.row)">考勤管理</el-dropdown-item>
                            <el-dropdown-item command="c" :icon="Guide"
                                @click="employmentView(scope.row)" :disabled="!(work===scope.row.staffId) && !(work===scope.row.teacherId)">就业管理</el-dropdown-item>
                            <el-dropdown-item command="d" :icon="Tickets"
                                @click="examView(scope.row)">考试管理</el-dropdown-item>
                            <el-dropdown-item command="e" :icon="Share"
                                @click="register(scope.row)" :disabled="!(work===scope.row.staffId) && !(work===scope.row.teacherId)">邀请学生</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </template>
        </el-table-column>
    </el-table>

    <div class="demo-pagination-block" style="margin-top: 20px">
        <el-pagination size="small" v-model:current-page="page" v-model:page-size="size" :page-sizes="[5,10,15,20]"
            :total="total" :background="true" layout="total, sizes, prev, pager, next"
            @current-change="handleCurrentChange" />
    </div>
    <ClassUpdateStatus v-if="updateStateDialog" v-model:updateStateDialog="updateStateDialog" :rowData="rowData"  v-model:isPermissions="isPermissions"/>
</template>
<script setup>
import { ElTable } from "element-plus"
import { ref, reactive } from "vue"
import axios from "@/axios/index.js"
import { useRouter } from 'vue-router'
import { Tickets, Notebook, Postcard, Finished, Guide, Operation, Filter, Share, ArrowDown } from '@element-plus/icons-vue'
import ClassUpdateStatus from "@/views/classes/classcourse/ClassUpdateStatus.vue"
import {useStaffStore} from "@/stores/staff.js";

const router = useRouter()
let loading = ref(true)
let updateStateDialog = ref(false)
let rowData = reactive({})

let tableData = ref([])
const page = ref(1) //当前页
const total = ref(100) //总记录数
const size = ref(5) //每页显示条数
let pagination = reactive({
    currentPage: 1,
    pageSize: 5
})

let staffId = useStaffStore().staffInfo.staff.id

let formData = reactive({
    id: '',
    className: '',
    realName: '',
    teacherName: '',
    subjectId: '',
    classStatus: '',
    subjectName: '',
})

//重置模糊搜索
function reset() {
    formData.className = '',
        formData.realName = '',
        formData.teacherName = '',
        formData.classStatus = '',
        formData.subjectName = ''
    loadTableData()
}


//当前用户是否有 cud权限    1具备权限   0没有权限   默认无权操作
let isPermissions = ref(0)

/** 结业操作*/
function updateClassStatus(rowData2) {
  if(rowData2.staffId == useStaffStore().staffInfo.staff.id || rowData2.teacherId == useStaffStore().staffInfo.staff.id){
    //如果是教员或者班主任   权限打开
    isPermissions.value = 1
  }else {
    isPermissions.value = 0
  }

  rowData = rowData2
  updateStateDialog.value = true

}



//加载数据
function loadTableData() {
    loading.value = true
    axios.get(`/api/v1/class/getClassList`, {
        params: {
            current: pagination.currentPage,
            size: pagination.pageSize,
            className: formData.className,
            realName: formData.realName,
            teacherName: formData.teacherName,
            classStatus: formData.classStatus,
            subjectName: formData.subjectName,
          staffId:useStaffStore().staffInfo.staff.id
        }
    }).then(resp => {
      // 处理返回的数据，将其转换为适合表格展示的格式
      const data = resp.data.data;
      const formattedData = data.data.map(item => {
        return item.classVoList.map(classItem => ({
          ...classItem,
          classCount: item.classVoList.length > 0? item.classVoList[0].classCount : 0
        }));
      }).flat();
      loading.value = false;
      tableData = formattedData;
      total.value = resp.data.data.data.length;

      console.log(resp.data.data.data);
    }).catch(error => {});
}


/**
 * 切页
 */
function handleCurrentChange(page) {
    pagination.currentPage = page
    loadTableData()
}

loadTableData()

function classCourse(row) {
    if(row.staffId === useStaffStore().staffInfo.staff.id){
      //如果是教员或者班主任   权限打开
      isPermissions.value = 1
    }
    if (router) {
        router.push({
            path: '/classManagement/classManagementProgress',
            query: {
                classId: row.id,
                subjectId: row.subjectId,
                isPermissions:isPermissions.value
            }
        })
    } else {
        if (!router) {
            console.error('Router is undefined in classCourse function')
        }
        if (!row) {
            console.error('Row data is undefined in classCourse function')
        }
        if (!row.id) {
            console.error('classId is not available in row data in classCourse function')
        }
        if (!row.subjectId) {
            console.error('subjectId is not available in row data in classCourse function')
        }
    }
}

//邀请学生
function register(row) {
    if (router) {
        router.push({
            path: '/Register',
            query: {
                classId: row.id,
                className: row.className
            }
        })
    }
}

//学生管理
function studentView(row) {
    if (router) {
        router.push({
            path: '/classManagement/student',
            query: {
                classId: row.id,
                className: row.className
            }
        })
    }
}

//就业管理
function employmentView(row) {
    if(row.staffId == useStaffStore().staffInfo.staff.id || row.teacherId == useStaffStore().staffInfo.staff.id){
        //如果是教员或者班主任   权限打开
        isPermissions.value = 1
    }

    if (router) {
        router.push({
            path: '/classManagement/employment',
            query: {
                classId: row.id,
                className: row.className,
                isPermissions:isPermissions.value
            }
        })
    }
}

//考试管理
function examView(row) {
    let staffInfo = useStaffStore().staffInfo
    if(staffInfo.staff.realName == row.realName){
        localStorage.setItem("purview",true)
    }else{
        localStorage.setItem("purview",false)
    }
    if (router) {
        router.push({ path: '/classManagement/exam' })
        localStorage.setItem("className", row.className)
        localStorage.setItem("classId", row.id)
    }
}
// 考勤管理
function classAttendance(row) {
    if (router) {
        router.push({
            path: '/classManagement/attendance',
            query: {
                classId: row.id,
            }
        })
    } else {
        if (!router) {
            console.error('Router is undefined in classCourse function')
        }
        if (!row) {
            console.error('Row data is undefined in classCourse function')
        }
        if (!row.id) {
            console.error('classId is not available in row data in classCourse function')
        }
        if (!row.subjectId) {
            console.error('subjectId is not available in row data in classCourse function')
        }
    }
}

let work=useStaffStore().staffInfo.staff.id



//作业管理
function Workandcorrect(row) {
    if (router) {
        router.push({
            path: '/classManagement/workandcorrect',
            query: {
                id: row.id,
                className: row.className
            }
        })
    }
}

</script>

<style scoped>
.el-dropdown-link {
    padding-top: 5px;
}

.el-dropdown-link:focus-visible {
    outline: none
}
</style>